
<div style="POSITION: relative" id="content">
  <h3>扩展DataGrid行内编辑器</h3>
  <div id="article_content" class="article_content">
    <p>一些常见的editors 添加到datagrid以便用户编辑数据,所有的editor都定义在$.fn.datagrid.defaults.editors对象,这个可以继承扩展以便支持新的editor,</p>
    <p>这个教程将向你展示如何添加一个新的numberspinner编辑器到datagrid.</p>
    <p><img src="documentation/images/1344590301_3934.png" alt=""></p>


    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 继承扩展numberspinner编辑器</h4>
    <pre name="code" class="javascript">$.extend($.fn.datagrid.defaults.editors, {  
    numberspinner: {  
        init: function(container, options){  
            var input = $('&lt;input type=&quot;text&quot;&gt;').appendTo(container);  
            return input.numberspinner(options);  
        },  
        destroy: function(target){  
            $(target).numberspinner('destroy');  
        },  
        getValue: function(target){  
            return $(target).numberspinner('getValue');  
        },  
        setValue: function(target, value){  
            $(target).numberspinner('setValue',value);  
        },  
        resize: function(target, width){  
            $(target).numberspinner('resize',width);  
        }  
    }  
}); </pre>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建DataGrid在html标记</h4>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; style=&quot;width:600px;height:250px&quot;  
        url=&quot;data/datagrid_data.json&quot; title=&quot;Editable DataGrid&quot; iconCls=&quot;icon-edit&quot;  
        singleSelect=&quot;true&quot; idField=&quot;itemid&quot; fitColumns=&quot;true&quot;&gt;  
    &lt;thead&gt;  
        &lt;tr&gt;  
            &lt;th field=&quot;itemid&quot; width=&quot;60&quot;&gt;Item ID&lt;/th&gt;  
            &lt;th field=&quot;listprice&quot; width=&quot;80&quot; align=&quot;right&quot; editor=&quot;{type:'numberbox',options:{precision:1}}&quot;&gt;List Price&lt;/th&gt;  
            &lt;th field=&quot;unitcost&quot; width=&quot;80&quot; align=&quot;right&quot; editor=&quot;numberspinner&quot;&gt;Unit Cost&lt;/th&gt;  
            &lt;th field=&quot;attr1&quot; width=&quot;180&quot; editor=&quot;text&quot;&gt;Attribute&lt;/th&gt;  
            &lt;th field=&quot;status&quot; width=&quot;60&quot; align=&quot;center&quot; editor=&quot;{type:'checkbox',options:{on:'P',off:''}}&quot;&gt;Status&lt;/th&gt;  
            &lt;th field=&quot;action&quot; width=&quot;80&quot; align=&quot;center&quot; formatter=&quot;formatAction&quot;&gt;Action&lt;/th&gt;  
        &lt;/tr&gt;  
    &lt;/thead&gt;  
&lt;/table&gt;  </pre>
    我们分配<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">numberspinner编辑器到<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">'unit cost' 字段,当开始编辑一行,用户可以用<span style="font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; font-size:14px; text-align:left">numberspinner
    编辑器编辑数据.</span></span></span>
 
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid23-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>

  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>